<template>
	<view class="give-away">
		<u-navbar :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32" :border-bottom="false"></u-navbar>
		<image class="page-bg" src="../../static/images/bg10@2x.png" mode=""></image>
		<view class="give-page-content">
			<view class="balance u-flex u-flex-col u-row-center">
				<view class="color-F5B340">{{bean}}</view>
				<view class="color-999999 u-font-32">欢嘻豆余额</view>
			</view>
			<view class="give-from">
				<view class="m-form" v-show="!is_member">
					<u-form :model="form" ref="uForm" :error-type="['toast']">
						<view class="u-flex u-flex-col u-row-center u-col-center">
							<view class="m-form-item">
								<u-form-item
									prop="name"
									:border-bottom="false"
									:label-style="{ padding: '0' }"
									left-icon="search"
									label-width="60"
									:left-icon-style="{ fontSize: '40rpx', color: '#C98F2F' }"
								>
									<u-input height="80" v-model="form.name" placeholder="输入对方手机号查找" maxlength="11" placeholderStyle="color:#C98F2F;font-size:32rpx;" />
								</u-form-item>
							</view>
							<view class="u-font-32 color-C98F2F u-padding-left-24 u-margin-bottom-72 u-margin-top-16" style="width:550rpx;">{{is_member}}</view>
							<u-button
								@click="submit"
								:hair-line="false"
								hover-class="none"
								:custom-style="{
									width: '550rpx',
									height: '90rpx',
									background: 'rgba(245,179,64,1)',
									border: '4rpx solid rgba(231,197,136,1)',
									borderradius: '20rpx',
									color: '#FFFFFF',
									fontSize: '36rpx'
								}"
							>
								搜索
							</u-button>
						</view>
					</u-form>
				</view>
				<view class="m-form" v-show="is_member">
					<u-form :model="form2" ref="uForm2" :error-type="['toast']">
						<view class="u-flex u-flex-col u-row-center u-col-center">
							<view class="m-form-item u-margin-bottom-72 " >
								<u-form-item
									prop="amount"
									:border-bottom="false"
									:label-style="{ padding: '0' }"
									left-icon="search"
									label-width="60"
									:left-icon-style="{ fontSize: '40rpx', color: '#C98F2F' }"
								>
									<!-- <u-icon name="search" color="#C98F2F" size="35"></u-icon> -->
									<u-input height="80" v-model="form2.amount" type="number" placeholder="填写赠送数量" placeholderStyle="color:#C98F2F;font-size:32rpx;" />
								</u-form-item>
							</view>
							<!-- <view class="u-font-32 color-C98F2F u-padding-left-24 u-margin-bottom-72 u-margin-top-16" style="width:550rpx;">赠送后剩余1000欢嘻豆</view> -->
							<view class="m-form-item">
								<u-form-item
									prop="account"
									:border-bottom="false"
									:label-style="{ padding: '0' }"
									left-icon="search"
									label-width="60"
									:left-icon-style="{ fontSize: '40rpx', color: '#C98F2F' }"
								>
									<!-- <u-icon name="search" color="#C98F2F" size="35"></u-icon> -->
									<u-input height="80" v-model="form2.account" :disabled="true" placeholder="输入对方账号赠送" placeholderStyle="color:#C98F2F;font-size:32rpx;" />
								</u-form-item>
							</view>
							<view class="u-font-32 color-C98F2F u-padding-left-24 u-margin-bottom-72 u-margin-top-16" style="width:550rpx;">{{is_member}}</view>
							<u-button
								@click="submit2"
								:hair-line="false"
								hover-class="none"
								:custom-style="{
									width: '550rpx',
									height: '90rpx',
									background: 'rgba(245,179,64,1)',
									border: '4rpx solid rgba(231,197,136,1)',
									borderradius: '20rpx',
									color: '#FFFFFF',
									fontSize: '36rpx'
								}"
							>
								确认
							</u-button>
							<view class="u-margin-top-40">
								<u-button
									@click="is_member = '';this.form2.amount=''"
									:hair-line="false"
									hover-class="none"
									:custom-style="{
										width: '550rpx',
										height: '90rpx',
										background: 'rgba(255,255,255,.42);',
										border: '4rpx solid rgba(231,197,136,1)',
										borderradius: '20rpx',
										color: '#999999',
										fontSize: '36rpx'
									}"
								>
									取消
								</u-button>
							</view>
						</view>
					</u-form>
				</view>
				<image class="give-from-bg" src="../../static/images/bg11@2x.png" mode=""></image>
			</view>
		</view>
		<view class=""></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			is_member:'',
			background: {},
			form: {
				name: ''
			},
			form2: {
				amount: '',
				account: ''
			},
			bean:0,
			rules: {
				name: [
					{
						required: true,
						message: '请输入对方昵称',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				]
			},
			rules2:{
				amount: [
					{
						required: true,
						message: '请填写赠送数量',
						type:'number',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				account: [
					{
						required: true,
						message: '请输入对方账号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				]
			},
		};
	},
	onReady() {
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		this.$refs.uForm.setRules(this.rules);
		this.$refs.uForm2.setRules(this.rules2);
		this.getBeanSurplus()
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					uni.showLoading({})
					this.getNickName()
				} else {
					console.log('验证失败');
				}
			});
		},
		submit2(){
			this.$refs.uForm2.validate(valid => {
				if (valid) {
					uni.showLoading({})
					this.Assignment()
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},
		getNickName(){
			let params = {
				mobile:this.form.name
			}
			this.$u.api.getNickName(params).then(res=>{
				uni.hideLoading()
				if(res.errno === "000"){
					this.is_member = res.result.nickname
					this.form2.account = this.form.name
				}else{
					this.is_member = ""
					this.$u.toast(res.errmsg)
				}
			}).catch(err=>{
				console.log(err);
			})
		},
		Assignment(){
			let params = {
				accepter:this.form2.account,
				mobile:this.vuex_user.mobile,
				num:this.form2.amount,
				code:""
			}
			this.$u.api.getAssignment(params).then(res=>{
				uni.hideLoading()
				this.$u.toast(res.errmsg)
				if(res.errno === "000"){
					this.bean =  new this.$BigNumber(this.bean).minus(this.form2.amount)
					this.$u.vuex("vuex_user.bean",this.bean)
				}
			}).catch(err=>{
				console.log(err);
			})
		},
		getBeanSurplus(){
			let params ={
				timestamp:Number(new Date())
			}
			this.$u.api.getBeanSurplus(params).then(res=>{
				if(res.errno === "000"){
					this.bean = res.result.bean
					this.$u.vuex("vuex_user.bean",res.result.bean)
				}
			}).catch(err=>{
				console.log(err);
			})
		}
	}
};
</script>

<style>
.give-away {
	width: 100vw;
	height: 100vh;
	position: relative;
}
.page-bg {
	display: flex;
	width: 100%;
	height: 553rpx;
	position: absolute;
	top: 0;
	left: 0;
}
.give-page-content {
	position: relative;
	z-index: 2;
}
.balance {
	font-size: 72rpx;
}
.give-from {
	width: 700rpx;
	min-height: 462rpx;
	position: relative;
	margin: 0 auto;
	margin-top: 96rpx;
}
.m-form {
	position: relative;
	z-index: 2;
	padding-top: 82rpx;
	padding-bottom: 110rpx;
	box-sizing: border-box;
}
.m-form-item {
	width: 550rpx;
	height: 80rpx;
	background: rgba(255, 255, 255, 0.54);
	border-radius: 10rpx;
	padding-left: 24rpx;
	box-sizing: border-box;
}
.m-form-item /deep/ .u-form-item{
	padding: 0 !important;
}
.give-from-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
</style>
